<template>
  <div class="taskEntryItem">
    <Form ref="formInline" :model="formInline" >
      <Row
        v-for="(item, index) in formInline.items" 
        :key="index" 
        type="flex" 
        justify="center" 
        :gutter="10" 
        style="margin-top: 30px;"
        align="middle">
        <Col span="2">{{item.threadMaterial}}</Col>
        <Col span="3">
          <FormItem>
            <Select filterable clearable v-model="item.system" style="width:110px">
              <Option 
                v-for="(sub, subIndex) in item.clientTypes" 
                :value="sub.client"
                @click.native="clientTypesChange(sub, index)"
                :key="subIndex"
              >{{ sub.client }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="3">
          <FormItem>
            <Select filterable clearable v-model="item.purpose" style="width:110px">
              <Option 
                v-for="(sub, subI) in item.addUpList" 
                :value="sub.addUp" 
                @click.native="addUpChange(sub, index)"
                :key="subI"
              >{{ sub.addUp }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem>
            <Select filterable clearable v-model="item.detailedPurpose" style="width:150px">
              <Option 
                v-for="(sub, subI) in item.uptypeList" 
                :value="sub.id" 
                :key="subI"
              >{{ sub.uptype }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="2">
          <FormItem>
            <InputNumber :min="0" v-model="item.count"></InputNumber>
          </FormItem>
        </Col>
        <Col span="3">
          <FormItem>
            <DatePicker 
              v-model="item.dataTime" 
              type="date" 
              placeholder="请选择时间"
            ></DatePicker>
          </FormItem>
        </Col>
        <Col span="4">
          <FormItem>
            <Checkbox v-model="item.isCheck">是否作为优秀作品</Checkbox>
          </FormItem>
        </Col>
        <Col span="3">
          <FormItem>
            <UploadImg v-if="item.isCheck" :imgUrl.sync="item.imgUrl"></UploadImg>
          </FormItem>
        </Col>
      </Row>
    </Form>
    <Row class-name="rowStyle">
      <Col span="24">
        <Button @click="handleReset">清空</Button>
        <Button type="primary" @click="handleSubmit('formInline')">提交录入</Button>
      </Col>
    </Row>
    
  </div>
</template>

<script>
import UploadImg from './uploadImg.vue'
export default {
  props: {
    MaterialList: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      formInline: {
        items: [],
        // 新增/修改
      },
    }
  },
  components: {
    UploadImg
  },
  methods: {
    // 提交
    handleSubmit() {
      this.$emit('handlerSubmit', this.formInline)
    },
    // 一级下拉
    clientTypesChange(item, index) {
      this.formInline.items[index].addUpList = item.addUps

    },
    // 二级下拉
    addUpChange(item, index) {
      this.formInline.items[index].detailedPurpose = item.uptypes[0].id
      this.formInline.items[index].uptypeList = item.uptypes
    },
    // 清空
    handleReset () {
      this.$emit('handlerReset')
      this.formInline.items = []
    },
  },
  watch: {
    MaterialList: {
      handler(data) {
        if(data.length) {
          this.formInline.items = []
          for (let i = 0; i < data.length; i++) {
            const obj = {
              system: '',   // 系统
              purpose: '',  // 方式
              detailedPurpose: '',   // 详细方式
              count: 0,    // 数量
              dataTime: '',  // 日期
              isCheck: false, // 是否为优秀
              imgUrl: '',
              addUpList: [],
              uptypeList: []
            }
            this.formInline.items.push({
              ...data[i],
              ...obj
            })
          }
        } 
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
  .taskEntryItem {
    margin-top: 40px;
    /deep/ .ivu-form-item {
      margin-bottom: 0;
    }
    /deep/ .ivu-select-single .ivu-select-selection {
      border-radius: 0;
      padding: 0 24px 0 4px;
    }
    /deep/ .ivu-upload {
      flex-direction: column;
    }
    /deep/ .ivu-upload .ivu-upload-list {
      margin-left: 0;
      width: 120px;
    }
    /deep/ .ivu-upload .ivu-upload-list .ivu-upload-list-file-finish span {
      white-space: nowrap;
      overflow: hidden;  // 超出的文本隐藏
      text-overflow: ellipsis; // 溢出用省略号显示
    }
    .rowStyle {
      margin-top: 60px;
      text-align: center;
      /deep/ .ivu-btn {
        width: 120px;
        height: 40px;
        margin: 0 10px;
      }
    }
  }
</style>